const Star=Vue.defineComponent({
	props:{
		value:Number
	},
	data(){
		return{
			hoverIdx:this.value||0,
			rate:this.value||0
		}
	},
	watch:{
		rate(){
			this.$emit('update:value',this.rate)
		}
	},
	template:`
		<ul class="star">
			<li v-for='i in 5' @mouseenter="hoverIdx=i" @mouseleave="hoverIdx=rate" @click="rate=i">
				<img v-if="i<=hoverIdx" src="../img/star.png" alt="">
				<img v-else src="../img/star-off.png" alt="">
				
			</li>
			<li>{{rate}}分</li>
		</ul>
		{{hoverIdx}}{{rate}}
	`
})